// 请求参数，在后面要进行修改，所以请求参数设置为全局变量
let data = {
    pagenum: 1,   //页面，默认肯定获取第一页的数据
    pagesize: 2,  //每条的页数
    // state: '已发布',  //做筛选的时候，在加入 state 和cate_id 参数
    // cate_id: 2
}

//-------------获取文章列表----------------
//封装一个函数，获取数据，并渲染到表格中
function renderArticle() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function (res) {
            // console.log(res);
            let html = '';
            res.data.forEach(item => {
                html += `
                <tr>
                    <td>${item.title}</td>
                    <td>${item.cate_name}</td>
                    <td>${item.pub_date}</td>
                    <td>${item.state}</td>
                    <td>
                        <a href="./edit.html?id=${item.id}" class="layui-btn layui-btn-xs" lay-submit lay-filter="formDemo">编辑</a>
                        <button type="reset" data-id="${item.id}"  class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>
                `
            });
            $('tbody').html(html);
            showPage(res.total);

            // let laypage = layui.laypage;
            // //执行一个laypage实例
            // laypage.render({
            //     elem: 'page',  //注意，这里的 test1 是 ID，不用加 # 号
            //     count: e,//数据总数，从服务端得到
            //     count: e, //数据总数，从服务端得到
            //     //         curr: data.pagenum,    //当前的页面-->起始页。一般用于刷新类型的跳页以及HASH跳页。
            //     //         limits: data.pagesize,   //表示每页的数据条数-->每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
            // });
        }
    })
}

renderArticle()

// ------------分页---------------
//     调用函数：通过传参得到数据总数（或者放在Ajax请求里面也可以）
function showPage(t) {
    // 加载分页模块
    let laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'page',//注意，这里的 test1 是 ID，不用加 # 号
        count: t, //数据总数，从服务端得到
        curr: data.pagenum,    //当前的页面-->起始页。一般用于刷新类型的跳页以及HASH跳页。
        limit: data.pagesize,   //表示每页的数据条数-->每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
        limits: [2, 4, 5, 8],  //下拉框的数字，表示每页显示几条-->要layout 参数开启了 limit，则会出现每页条数的select选择框
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], //自定义排版
        jump: function (obj, first) {   // 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            //首次不执行
            if (!first) {
                data.pagenum = obj.curr;
                data.pagesize = obj.limit;
                renderArticle()
            }
        }
    });
}

// ------------筛选---------------
// 获取所有的分类，渲染到 select>option 中
let form = layui.form;
// console.log(form);
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        // console.log(res);
        let num = '';
        res.data.forEach(item => {
            num += `<option value="${item.id}">${item.name}</option>`
        });
        $('#classify').append(num)

        // 更新渲染
        //form.render(); //如果没有参数（更新全部）
        form.render('select')  //刷新select选择框渲染 
    }
})

//筛选，只需改变Ajax请求，然后重新渲染数据
$('#search').on('submit', function (e) {
    // 阻止默认行为
    e.preventDefault();
    let cate_id = $('#classify').val()
    let state = $('#state').val()
    // console.log(cate_id, state);
    cate_id ? data.cate_id = cate_id : delete data.cate_id;
    state ? data.state = state : delete data.state;
    // 设置ajax请求的参数
    // if (cate_id) {
    //     data.cate_id = cate_id;
    // } else {
    //     delete data.cate_id; // delete 用于删除对象的属性
    // }

    // if (state) {
    //     data.state = state;
    // } else {
    //     delete data.state;
    // }

    // 重置页码为 1
    data.pagenum = 1;
    renderArticle(); // 调用renderArticle();渲染页面即可
})

//--------删除--------------
$('tbody').on('click', 'button:contains("删除")', function () {
    let id = $(this).data('id')
    let that = $(this);
    // console.log(id, that);
    layer.confirm('你确定要删除小可爱吗？', function (index) {
        // 使用dom的方式删除该行
        that.parents('tr').remove();
        $.ajax({
            url: '/my/article/delete/' + id,
            success: function (res) {
                // console.log(res);
                layer.msg(res.message);
                // 另外一个删除思路，当前页的文章删没了，我们显示上一页的数据。
                // 当确定删除了，首先用dom的方式，把tr移除。
                // 当删除的请求成功后，判断tbody里面是否有tr
                // 如果有tr，那么还获取当前页的数据
                // 如果没有tr，说明当前页的数据被删没了，则 修改 pagenum--，获取上一页的数据
                // if (res.status === 0) {
                //     // renderArticle(); // 调用renderArticle();渲染页面即可
                //     if ($('tbody').children().lenght > 0) {
                //         renderArticle();
                //     } else {
                //         data.pagenum--;
                //         if (data.pagenum === 0) return;
                //         renderArticle();
                //     }
                // }

                if (res.status === 0) {
                    renderArticle();
                }
            }
        })
        layer.close(index)   //关闭弹层
    })
})